<template>
  <scroll-view class="wrapper p12" :scroll-y="true" style="width: 100vw; height: 100vh; background: rgba(248, 248, 248, 1)">
    <view class="bgc-white p12 br4" style="height: auto">
      <view class="flex-center-between">
        <view class="fw500">{{ target.institutionTitle }}</view>
        <view>{{ formatFullDate(target.gmtCreate) }}</view>
      </view>
      <u-parse :html="target.institutionContent" class="mt12" style="width: calc(100vw - 48px); overflow-x: hidden" />
      <view class="mt12" style="width: calc(100vw - 24px)">
        <view class="title-block">附件</view>
        <view v-for="li in files" :key="li" class="flex-center-between mt12">
          <view style="word-wrap: break-word; word-break: break-all; flex: 1">{{ getFileName(li) }}</view>
          <view class="flex-center ml12" style="width: 100px; flex-shrink: 0">
            <view class="btn" @click.stop="doPreview(li)">预览</view>
            <view class="btn ml8" @click.stop="doDownload(li)">下载</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import { getExtFromUrl, getFileName, formatFullDate } from "@/utils/tools";
import { mapState } from "vuex";
import { downloadFileReq } from "@/utils/request";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      target: {}
    };
  },
  computed: {
    ...mapState(["register"]),
    files() {
      if (this.target.institutionUrl) {
        const temps = this.target.institutionUrl.split(",");
        return temps;
      }
      return [];
    }
  },
  watch: {},
  created() {
    const temp = uni.getStorageSync("tempZhiduDetail");
    if (temp) {
      this.target = JSON.parse(temp);
    }
  },
  mounted() {},
  methods: {
    formatFullDate,
    getFileName,
    doDownload(url) {
      uni.setClipboardData({
        data: `${url}?token=${this.register.token}`,
        showToast: false,
        success: function() {
          uni.showModal({
            title: "复制成功",
            content: "下载地址已复制到黏贴版，请打开浏览器下载"
          });
        },
        fail: function() {
          uni.showToast({
            title: "下载地址复制失败",
            icon: "none"
          });
        }
      });
    },
    doPreview(url) {
      const exts = getExtFromUrl(url);
      if (exts[0] === "office" || exts[0] === "pdf") {
        downloadFileReq({ url })
          .then(res => {
            const filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              showMenu: true
            });
          })
          .catch(err => {
            console.log(err);
          });
      } else if (exts[0] === "img") {
        uni.previewImage({
          current: `${url}?token=${this.register.token}`,
          urls: [`${url}?token=${this.register.token}`]
        });
      } else {
        uni.showToast({
          title: "预览不支持该文件格式",
          duration: 200,
          icon: "none"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  border: 1px solid $theme;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  color: $theme;
  font-size: 12px;
}
</style>
